<div class="page-container">
    <h1>面部对比</h1>
    
    <!-- API说明 -->
    <div class="api-docs">
        <h3>API接口说明</h3>
        <div class="api-item">
            <h4>面部对比</h4>
            <p>接口地址：/faceapi/v1/recognizeCompareImage</p>
            <p>返回格式：JSON</p>
            <p>请求方式：POST</p>
            <p>请求示例：</p>
            <pre>
curl -X POST /faceapi/v1/recognizeCompareImage 
-H "Authorization: your_token_here" 
-F "imgFile1=@image1.jpg" 
-F "imgFile2=@image2.jpg"</pre>
            
            <p>请求参数说明：</p>
            <table class="api-table">
                <tr>
                    <th>名称</th>
                    <th>类型</th>
                    <th>必填</th>
                    <th>说明</th>
                </tr>
                <tr>
                    <td>imgFile1</td>
                    <td>file</td>
                    <td>是</td>
                    <td>第一张人脸图片，支持jpg/png格式</td>
                </tr>
                <tr>
                    <td>imgFile2</td>
                    <td>file</td>
                    <td>是</td>
                    <td>第二张人脸图片，支持jpg/png格式</td>
                </tr>
                <tr>
                    <td>Authorization</td>
                    <td>string</td>
                    <td>是</td>
                    <td>登录获取的token，需要在请求头中传递</td>
                </tr>
            </table>

            <p>返回参数说明：</p>
            <table class="api-table">
                <tr>
                    <th>名称</th>
                    <th>类型</th>
                    <th>说明</th>
                </tr>
                <tr>
                    <td>success</td>
                    <td>boolean</td>
                    <td>请求是否成功</td>
                </tr>
                <tr>
                    <td>code</td>
                    <td>integer</td>
                    <td>状态码，200表示成功</td>
                </tr>
                <tr>
                    <td>msg</td>
                    <td>string</td>
                    <td>状态描述</td>
                </tr>
                <tr>
                    <td>data.compare_result</td>
                    <td>array</td>
                    <td>比较结果列表，true表示为同一人，false表示不是同一人</td>
                </tr>
            </table>

            <p>JSON返回示例：</p>
            <pre>
{
    "success": true,
    "code": 200,
    "msg": "比较完成",
    "data": {
        "compare_result": [true]
    }
}</pre>
        </div>
    </div>

    <div class="function-group">
        <div class="compare-container">
            <div class="compare-item">
                <div class="upload-area" id="compareUpload1">
                    <input type="file" id="compareFile1" accept="image/*" style="display: none;">
                    <div>上传第一张人脸图片</div>
                    <img id="comparePreview1" class="preview-image" style="display: none;">
                </div>
            </div>
            <div class="compare-item">
                <div class="upload-area" id="compareUpload2">
                    <input type="file" id="compareFile2" accept="image/*" style="display: none;">
                    <div>上传第二张人脸图片</div>
                    <img id="comparePreview2" class="preview-image" style="display: none;">
                </div>
            </div>
        </div>
        <div class="button-group">
            <div class="test-button-group">
                <button onclick="showTestImageSelect('compare')" class="test-button">
                    <i class="fas fa-vial"></i> 加载测试图片
                </button>
                <div id="compareTestSelect" class="test-select-dropdown">
                </div>
            </div>
            <button onclick="compareFaces()">开始对比</button>
        </div>
        <div class="loading" id="compareLoading" style="display: none;">处理中...</div>
        <div class="result-area" id="compareResult"></div>
    </div>
</div> 